<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>上下文关键字-隐式调用</title>
    <style>
        /* 初始化页面 */
        h1,body,head{
            margin: 0;
            padding: 0;
        }
        /* 设置标题属性 */
        h1{
            color: #21AAB5;
            font-family: "宋体";
            text-align: center;
        }
        /* 设置文本域属性 */
        #inputText{
            /* 先设置为块级元素 */
            display: block;

            height: 150px;
            width: 80%;
            margin: 10px auto;
            background-color: #EFE7D2;
            /* 文字为白色 */
        }
        /* 设置按钮域属性 */
        #btn{
            display: block;
            height: 50px;
            width: 250px;
            position: relative;
            left: 150px;
            border-radius: 7px;
            border-color: #79F5FF;
            background-color: #79F5FF;
        }
        /* 设置处理后的结果域 */
        #result{
            width: 80%;
            margin: 10px auto;
            background-color: #EFE7D2;
        }
    </style>
</head>
<body>
<!-- 标题 -->
<h1>上下文关键字</h1>

<!-- 文本域 -->
<!-- 1.输入撒数 -->
<textarea id = "inputText" placeholder="请输入文本(注意:必须为英文哦!!!)"></textarea>

<!-- 按钮 -->
<button id = "btn">处理文本</button>

<!-- 处理的结果 -->
<div id="result"></div>
<script>
    //2.对按钮添加事件

    //2.1获取按钮对象
    let btn = document.getElementById("btn")
    //2.2对按钮绑定事件
    btn.onclick = function(){
        //2.3处理文本
        //2.3.1获取文本内容对象
        let textarea = document.getElementById("inputText")
        //2.3.2获取对象中的内容（所有与内容以字符串形式存在有换行处用\n表示）
        let textValue = textarea.value
        //2.3.3去除内容的前后空格之后判断内容是否为空
        if(textValue.trim() === ""){
            alert("请输入内容！！！")
            retrun//如果内容为空，那么你就不要向后执行了，直接结束函数
        }

        //3.循环移动
        //3.1首先我会用一个字符串数组来接收以\n切割的字符串返回的字符串数组
        let temp = textValue.split("\n");
        //3.2然后我将temp中的非空格行给存在initStr数组中
        let initStr = []
        for(let i = 0;i < temp.length;i++){
            if(temp[i].trim() !== ""){
                //如果去掉首尾空格不为空，那么添加到initStr集合
                initStr.push(temp[i])
            }
        }
        // console.log(initStr)//测试一下有没有问题
        //3.3开始循环移动
        //3.3.1定义moveStr存放循环移动后的文本
        let moveStr = []
        for(let i = 0;i < initStr.length;i++){
            //使用临时变量存放一行
            let line = initStr[i];
            //使用临时变量将这个字符串以空格切割
            let arrStr = line.split(" ")
            //对切割后的数组进行循环移动
            for (let i = 0; i < arrStr.length; i++) {
                //使用临时数组存放每一行移动的数据
                let tempArr = []
                for (let j = i; j < arrStr.length; j++) {
                    tempArr.push(arrStr[j])
                }
                for (let j = 0; j < i; j++) {
                    tempArr.push(arrStr[j])
                }
                //将这个一次数组个元素以空格隔开转为字符串并存于moveStr数组
                moveStr.push(tempArr.join(" "))
            }
        }
        // 没问题console.log(moveStr)//测试一下有没有问题
        //4.排序
        moveStr.sort()
        console.log(moveStr)//测试一下有没有问题
        for (var i = 0; i < moveStr.length; i++) {
            console.log(moveStr[i])
        }
        //5.输出
        /**
         * 思想：将moveStr数组中的所有元素转换成一个字符串各个元素之间以<br>分开
         * 并且我将内容输出到id=result的div当中
         * 现在我div中内容为空 innerHtml = ""
         * 只需将我div中的innerHTML值给赋值上就行了
         */
        //5.1首先获取id=result的div对象
        let div = document.getElementById("result")
        //5.2对div对象中的innerHTML赋值
        /**
         * moveStr.join("<br>")代表将moveStr数组中的元素连在一起转为字符串，每一个元素之间用换行隔开
         * 注意不要写成moveStr.join("\n")在 HTML 中，普通的换行符 \n 会被当作空格处理，而不是实际的换行。
         */
        div.innerHTML = moveStr.join("<br>")
    }
</script>
</body>
</html>
